<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="cvs" width="400" height="400"></canvas>

  <script>
    let cvs = document.getElementById("cvs");
    let cxt = cvs.getContext("2d");

    cxt.beginPath();
    cxt.moveTo(20, 20);
    cxt.bezierCurveTo(20, 100, 200, 100, 200, 20);
    cxt.stroke();

    cxt.beginPath();
    cxt.moveTo(200, 200);
    cxt.quadraticCurveTo(300, 260, 400, 200);
    cxt.quadraticCurveTo(300, 140, 200, 200);
    cxt.fill();
    cxt.stroke();


    createArc(cxt, {x: 300, y:200, r:30}, "stroke", "#fff");
    createArc(cxt, {x: 300, y:200, r:50}, "stroke", "#fff");
    createArc(cxt, {x: 300, y:200, r:70}, "stroke", "#fff");
    createArc(cxt, {x: 300, y:200, r:20}, "fill", "red");
    createArc(cxt, {x: 300, y:200, r:15}, "stroke");
    createArc(cxt, {x: 300, y:186, r:4}, "fill");
    createArc(cxt, {x: 288, y:208, r:4}, "fill");
    createArc(cxt, {x: 312, y:208, r:4}, "fill");
    createArc(cxt, {x: 300, y:200, r:4}, "fill");

  

    function createArc(cxt, coor, type, color = "#000") {
      cxt.beginPath();
      if (type === "stroke") {
        cxt.strokeStyle = color;
        cxt.arc(coor.x, coor.y, coor.r, 0, 2 * Math.PI);
        cxt.stroke();
        return
      }
      cxt.fillStyle = color;
      cxt.arc(coor.x, coor.y, coor.r, 0, 2 * Math.PI);
      cxt.fill();
    }



  </script>
</body>
</html>